<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="div_id1">
    <cpn2></cpn2>
    <cpn1></cpn1>
</div>
<script>
    const cpnC1=Vue.extend({
        template:`
            <div>
                <h2>我是标题1</h2>
            </div>`
    });
    const cpnC2=Vue.extend({
        <!--cpn1在cpnC2中注册时，会直接被替换为cpnC1的template-->
        template:`
            <div>
                <h2>我是标题2</h2>
                <cpn1></cpn1>
            </div>`,
        //子组件(在cpnC2组件中注册的cpnC1组件的作用域只在cpnC2中，如果需要在外部使用
        // 需要注册为全局组件或app局部组件)
        components:{
            cpn1:cpnC1
        }
    });
    //父组件 root组件
    const app=new Vue({
        el:"#div_id1",
        //子组件
        components:{
            cpn2:cpnC2,
            //如果想在div_id1中单独使用cpn1，必须在这里重新注册一次
            cpn1:cpnC1
        }
    })
</script>
</body>
</html>